<template>
	<el-card shadow="never" header="个人邮件设置">
		<el-form ref="form" :model="form" :rules="rules" label-width="120px" style="margin-top:20px;">
			<el-form-item label="邮件账号" prop="email">
				<el-input v-model="form.email" style="width:50%" size="50" placeholder="xxx@qq.com"></el-input>
			</el-form-item>
			<el-form-item label="邮件密码" prop="passWord">
				<el-input v-model="form.passWord" type="password" style="width:50%" placeholder="邮件登陆密码"></el-input>
			</el-form-item>
			<el-form-item label="是否开启SSl">
				<el-switch v-model="form.type" inline-prompt active-value="1" inactive-value="0"></el-switch>
			</el-form-item>
			<el-form-item label="POP3服务器" prop="pop3">
				<el-input v-model="form.pop3" size="50" style="width:50%" placeholder="POP3服务器 pop3.qq.com"></el-input>
				<div class="el-form-item-msg">例如:pop3.qq.com，不要http://,https://</div>
			</el-form-item>
			<el-form-item label="POP3端口" prop="popPort">
				<el-input-number v-model="form.popPort"></el-input-number>
			</el-form-item>
			<el-form-item label="SMTP服务器" prop="smtp">
				<el-input v-model="form.smtp" size="50" style="width:50%" placeholder="SMTP服务器 smtp.qq.com"></el-input>
				<div class="el-form-item-msg">例如:smtp.qq.com，不要http://,https://</div>
			</el-form-item>
			<el-form-item label="SMTP端口" prop="port">
				<el-input-number v-model="form.port"></el-input-number>
			</el-form-item>
			<el-form-item label="邮件签名">
				<el-input v-model="form.sign" size="200" type="textarea" style="width:50%" placeholder="邮件签名"></el-input>
				<div class="el-form-item-msg">注：在使用QQ邮件时请开启SSL,端口为465,同时查看邮件服务器相关的SMTP服务的设置信息。请在专业人员的指导下设置。</div>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="setEmailConfig">保存</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
import {validateURL,verifyEmail} from "@/utils/verificate";

export default {
	data() {
		return {
			form: {
				email: 'xxx@qq.com',
				port: 25,
				popPort:110,
				passWord: '',
				pop3: '',
				smtp: '',
				type: '',
				sign: ''

			},
			rules: {
				email: [
					{required: true, message: '邮件账号不能为空'},
					{validator: verifyEmail, trigger: 'blur'}
				],
				passWord: [
					{required: true, message: '邮件密码不能为空'}
				],
				pop3: [
					{required: true, message: 'POP3服务器地址不能为空'}

				],
				smtp: [
					{required: true, message: 'SMTP服务器地址不能为空'}
				],
				port: [
					{"pattern": /^[0-9]*$/, "message": "只能输入正整数"}
				]
			}
		}
	},
	mounted() {
		this.getMyEmailConfig();
	},
	methods: {
		async setEmailConfig() {
			this.$refs.form.validate(async (valid) => {
				if (valid) {
					var res = await this.$API.email.emailConfig.setEmailConfig.post(this.form);
					if (res.code == 200) {
						this.$message.success(res.message)
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				}
			})
		},
		async getMyEmailConfig() {
			var res = await this.$API.email.emailConfig.getMyEmailConfig.get();
			if (res.code == 200) {
				if(res.data!=null)
				{
					this.form = res.data;
				}
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		}
	}
}
</script>

<style>
</style>
